<template>
    <div class="inner-tree point-no-selected" style="height: 100vh;width: 100%;"
    >
        <treeZ
                ref="treeRef"
                :tree-data="treeData"
                @click-angle="clickAngle($event)"
        >
            <template v-slot="slotProps">
                <!--必须实现的函数点击  -->
                <div class="tree-node-style"
                     @click="(e) => handleClickNode(slotProps,e)"
                >
                    <div class="tree-font" style="font-size: 18px;width: 130px" >{{slotProps.item.id}}</div>
                    <div>
                    </div>
                </div>
            </template>
        </treeZ>
    </div>
</template>

<script>
/**
 *
 *
 * ------------ 基础功能 （组件）
 *
 *
 * */


import treeZ  from "vue-tree-zw"
import 'vue-tree-zw/tree-z/tree-z.css';
import treeData from "../assets/json/treeData.json"




export default {
    name: "example1",
    components:{
        treeZ
    },
    mounted() {
        console.log('组件实例：', this.$refs.treeRef);
        this.$refs.treeRef.initTree();
    },
    data(){
        return{
            treeData: treeData,

            /*树节点属性*/
            layout:{
                //默认节点属性
                defaultNodeStyle: {
                    width: 85,  //节点宽度
                    height: 85, //节点高度
                },
                //默认节点布局
                defaultNodeLayouts:{
                    nodeDistanceX: 50,  //节点左右 距离
                    nodeDistanceY: 55,  //节点上下 距离
                },
            },
        }
    },
    methods:{

        //默认回填函数
        handleClickNode(slotProps,e){
            console.log("点击时触发",slotProps.item,e,e.target)

            slotProps.clickNode({
                data: slotProps.item,
            });
        },

        //扩展按钮
        clickAngle(e){
            console.log("clickAngle",e);

            e.children = [
                {
                    "id": "data_132_1",
                    "children": null
                },
                {
                    "id": "data_132_2",
                    "children": null
                },
                {
                    "id": "data_132_3",
                    "children": null
                },
            ];

            if(this.$refs.treeRef){
                this.$refs.treeRef.insertTreeNode(e.nodeId,e);
            }
        },
    }

}
</script>

<style scoped>

</style>
